<template>
	<view>
		<!-- tabs标签页 -->
		<view class="tabs">
			<view class="tab_item" :class="index == tabCur ? 'cur' : ''" v-for="(item, index) in ['帐户充值', '佣金导入' ]"
				:key="index" @click="tabSelect(index)">{{ item }}</view>
		</view>
		<view class="conent">
			<view class="total">
				<span>￥</span>
				<input type="number" placeholder="0.00" placeholder-class="total_mon" />
			</view>
			<view class="conent_line"></view>
			<view class="Tips" v-if="tabCur==0">
				提示：当前余额为<span>￥12345.00</span></view>
				<view class="Tips" v-if="tabCur==1">
					提示：当前佣金为<span>￥888.00</span></view>
			<button class="btn" v-if="tabCur==0">立即充值</button>
			<button class="btn" v-if="tabCur==1">立即转入</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCur: 0 // 当前tabs下标
			}
		},
		methods: {
			// tab切换
			tabSelect(index) {
				if (this.tabCur === index) return
				this.tabCur = index
				console.log('this.tabCur', this.tabCur)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ uni-input{
		height: 2.4em;
	}
	.total_mon {
		font-size: 60rpx;
		font-weight: 700;
		color: #DDDDDD;
		margin-left: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.conent_line {
		width: 80%;
		border-bottom: 0.5rpx dashed #DDDDDD;
	}

	.total {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// height: 100rpx;
		color: #333;
		font-size: 60rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
	}

	.Tips {
		color: #A9A9A9;
		align-items: center;
		margin: 20rpx 0;

	}

	.conent {
		padding: 20rpx;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.btn {
		width: 80%;
		background-color: #00C050;
		color: #fff;
		font-weight: 600;
		border-radius: 50rpx;
	}

	.tabs {
		display: flex;
		justify-content: space-evenly;
		font-size: 32rpx;
		background-color: #FFF;
		color: #A9A9A9;
	}

	.tab_item {
		height: 114rpx;
		line-height: 100rpx;
	}

	.cur {
		font-size: 40rpx;
		font-weight: 600;
		color: #333;
	}
</style>
